<template>
	<view>
		<view class="searchbox">
			<view class="searchTitle">
				保险
			</view>
			<view class="searchview">
				<view class="searchright">
					<u-search placeholder="日照香炉生紫烟" :show-action="false"></u-search>
				</view>
			</view>
		</view>

		<view class="banner">
			<view class="banner-cont">
				<view class="cont-left">
					<view style="font-size: 24rpx; color: #373c46;">众安保险</view>
					<view style="color: 2e3033;font-size: 32rpx;margin: 14rpx 0rpx;">最高150,00免费保障</view>
					<view style="font-size: 24rpx;color: #bcc3cd;">恶性肿瘤确诊获赔</view>
				</view>
				<view class="cont-right">
					<button class="cont-btn">领500元保额</button>
				</view>
			</view>
			<view class="banner-btm">
				<view style="float: left;">快去开启健康保障</view>
				<view style="float: right;">我的保单 <image style="margin-left: 8rpx;   width: 18rpx;height: 16rpx;"
						src="../../static/image/icon_wodebaodan_xiayiji.png" mode=""></image>
				</view>
			</view>
		</view>

		<view class="itembanner">
			<view class="banner-item" v-for="item in banneritemlist" :key="item.name">
				<image :src="item.url" style="width:96rpx;height: 96rpx;"></image>
				<view style="width: 100%;height: 40rpx;line-height: 40rpx;text-align: center;">{{item.name}}</view>
			</view>
		</view>

		<image src="../../static/image/img_baoxian_banner@2x.png"
			style="display: block; width:680rpx;height:184rpx;margin: -20rpx auto 20rpx auto;" mode=""></image>

		<view class="jingxuan">
			<text style="color: #2a2d32;font-size: 36rpx;">精选保险</text>
			<view class="jingxuanitem">
				<view class="itemtitaltop">
					<view class="itemtitaltop-left">
						百万医疗险
					</view>
					<view class="itemtitaltop-center">
						医疗保障 | 网红爆款
					</view>
					<view class="itemtitaltop-right">
						精选
					</view>
				</view>

				<view class="itemtitalcenter">
					<view class="setv">
						v
					</view>
					高达800万保额
				</view>

				<view class="itemtitalcenter2">
					<view class="setv">
						v
					</view>
					意外和疾病住院都能赔
				</view>

				<view class="itemtitalbtm">
					<view style="float: left;">
						<text class="itemtitalbtmnum">2</text>
						<text class="itemtitalbtmtext">元/首月</text>
					</view>
				
					<view class="itemtitalbtmbtn" @tap="uni.navigateTo({
						url:'/pages/inputinsurance/inputinsurance'
					})">
						立即投保
					</view>
				</view>

			</view>

			<view class="jingxuanitem" style="background-color:#f8f1eb ;">
				<view class="itemtitaltop">
					<view class="itemtitaltop-left">
						综合意外险
					</view>
					<view class="itemtitaltop-center" style="color: #ffb06d;">
						必备保障 | 安全出行
					</view>
					<view class="itemtitaltop-right">
						精选
					</view>
				</view>

				<view class="itemtitalcenter">
					<view class="setv">
						v
					</view>
					日常意外最高50万保额
				</view>

				<view class="itemtitalcenter2">
					<view class="setv">
						v
					</view>
					交通意外双倍赔付
				</view>

				<view class="itemtitalbtm">
					<view style="float: left;">
						<text class="itemtitalbtmnum">188</text>
						<text class="itemtitalbtmtext">元/首月</text>
					</view>
					<view class="itemtitalbtmbtn">
						立即投保
					</view>
				</view>

			</view>
		</view>

		<view class="family">
			<view class="familytitle">
				<view class="familytitletext1">为家人保障</view>
				<view class="familytitletext2" @click="goto">
					查看更多
				</view>
			</view>

			<view class="familylist">

				<view class="familytype">
					<view class="ftype-item" v-for="item in forlist" :key="item.id" :class="{active:selct == item.id}" @tap="selcted(item.id)" >{{item.name}}</view>
				</view>

				<view class="familytypelist">

					<view class="familytypelistitem">
						<image src="../../static/image/img_baoxian1@2x.png" class="familytypelistitem-img"></image>
						<view class="familytypelistitem-msg">
							<view class="msg-title">
								医疗健康保险2021版
							</view>
							<view class="msg-msg">
								20年保险续保 | 长期费率更优
							</view>
							<view class="msg-type">
								<view class="msg-type-item">
									品质升级
								</view>
								<view class="msg-type-item1">
									热销爆款
								</view>
							</view>
							<view class="msg-price">
								180<text style="font-size: 24rpx;color: #42454b;">元起</text>
							</view>
						</view>
					</view>

					<view class="familytypelistitem">
						<image src="../../static/image/img_baoxian2@2x.png" class="familytypelistitem-img"></image>
						<view class="familytypelistitem-msg">
							<view class="msg-title">
								重大基础保险
							</view>
							<view class="msg-msg">
								保障198种疾病 | 特定重疾二次赔付
							</view>
							<view class="msg-type">
								<view class="msg-type-item">
									品质升级
								</view>
								<view class="msg-type-item1">
									热销爆款
								</view>
							</view>
							<view class="msg-price">
								15.6<text style="font-size: 24rpx;color: #42454b;">元起</text>
							</view>
						</view>
					</view>

					<view class="familytypelistitem">
						<image src="../../static/image/img_baoxian3@2x.png" class="familytypelistitem-img"></image>
						<view class="familytypelistitem-msg">
							<view class="msg-title">
								承认意外险
							</view>
							<view class="msg-msg">
								涵盖各种意外责任 | 可拓展猝死责任
							</view>
							<view class="msg-type">
								<view class="msg-type-item">
									品质升级
								</view>
								<view class="msg-type-item1">
									热销爆款
								</view>
							</view>
							<view class="msg-price">
								180<text style="font-size: 24rpx;color: #42454b;">元起</text>
							</view>
						</view>
					</view>


					



				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banneritemlist: [{
						name: "健康",
						url: "../../static/image/icon_baoxian_jiankang.png"
					},
					{
						name: "意外",
						url: "../../static/image/icon_baoxian_yiwai.png"
					},
					{
						name: "旅行",
						url: "../../static/image/icon_baoxian_lvxing.png"
					},
					{
						name: "财产",
						url: "../../static/image/icon_baoxianjingangqu_caichan.png"
					},
					{
						name: "抗疫",
						url: "../../static/image/icon_baoxian_kangyi.png"
					}
				],
				forlist:[
					{
						id:1,
						name:"为父母"
					},
					{
						id:2,
						name:"为爱人"
					},
					{
						id:3,
						name:"为孩子"
					},
					{
						id:4,
						name:"为自己"
					}
				],
				selct:1
			}
		},
		methods: {
			goto:function(){
				uni.navigateTo({
					url:"../accident/accident"
				})
			},
			selcted(id){
				this.selct = id
			}
		}
	}
</script>

<style>
	.active{
		color: #FFFFFF !important;
		background-color: #2acb8c !important;
	}
	page {
		padding-bottom: 20rpx;
	}

	.searchbox {
		margin: 20rpx auto;
		width: 670rpx;
		height: 50rpx;
		z-index: 1000;
		line-height: 50rpx;
	}

	.searchTitle {
		padding-top: 5.5rpx;
		height: 50rpx;
		line-height: 50rpx;
		float: left;
		color: #373c46;
		font-size: 36rpx;
	}

	.searchview {
		float: left;
		margin-left: 24rpx;
		height: 50rpx;
	}

	.searchleft {
		width: 24rpx;
		height: 50rpx;
		border-radius: 50rpx 0rpx 0rpx 50rpx;
		background-color: rgb(247, 247, 247);
		float: left;
	}

	.searchright {
		line-height: 50rpx;
		width: 546rpx;
		height: 50rpx;
		border-radius: 0rpx 50rpx 50rpx 0rpx;
		float: left;
		color: #e6e7e7;
		font-size: 24rpx;
	}

	.banner {
		background: url(../../static/image/img_baoxian_dingbu.png);
		background-position: -50rpx -60rpx;
		background-size: 670rpx 350rpx;
		margin: 20rpx auto;
		width: 670rpx;
		height: 200rpx;
	}

	.bannerimage {
		width: 750rpx;
	}

	.banner-cont {
		margin: 16rpx 32rpx 8rpx 36rpx;
		width: 600rpx;
		min-height: 30rpx;
		overflow: hidden;
	}

	.cont-left {
		float: left;
	}

	.cont-right {
		float: right;
	}

	.cont-btn {
		width: 196rpx;
		height: 48rpx;
		line-height: 48rpx;
		margin-top: 75rpx;
		background-color: rgb(15, 177, 116);
		color: #fff;
		font-size: 24rpx;
	}

	.banner-btm {
		width: 670rpx;
		height: 48rpx;
		line-height: 48rpx;
		padding: 0rpx 36rpx;
		border-radius: 10rpx;
		background-color: rgb(15, 177, 116);
		margin-top: 16rpx;
		font-size: 24rpx;
		color: #fff;
	}

	.itembanner {
		margin: 20rpx auto;
		width: 670rpx;
		display: flex;
		justify-content: space-between;
	}

	.banner-item {
		width: 96rpx;
		height: 152rpx;
	}

	.guanggao {
		margin: 20rpx auto;
		width: 670rpx;
		height: 184rpx;
	}

	.jingxuan {
		margin: 20rpx auto;
		width: 670rpx;
		min-height: 10rpx;
	}

	.jingxuanitem {
		width: 100%;
		height: 268rpx;
		border-radius: 10rpx;
		background-color: #eff4fc;
		padding: 24rpx 36rpx;
		margin-top: 20rpx;
	}

	.itemtitaltop {
		overflow: hidden;
	}

	.itemtitaltop-left {
		color: #2a2d32;
		font-size: 32rpx;
		float: left;
	}

	.itemtitaltop-center {
		font-size: 24rpx;
		color: #6f9fff;
		float: left;
		margin-top: 8rpx;
		margin-left: 20rpx;
	}

	.itemtitaltop-right {
		width: 80rpx;
		height: 38rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		background-color: #25966a;
		border-radius: 5rpx;
		text-align: center;
		line-height: 38rpx;
		float: right;
	}

	.itemtitalcenter {
		margin-top: 16rpx;
		margin-bottom: 8rpx;
		font-size: 24rpx;
		color: #8d9299;
	}

	.itemtitalcenter2 {
		font-size: 24rpx;
		color: #8d9299;
		margin-bottom: 8rpx;
	}

	.setv {
		display: inline-block;
		width: 20rpx;
		height: 20rpx;
		text-align: center;
		line-height: 15rpx;
		border: 2rpx #36cd93 solid;
		border-radius: 20rpx;
		color: #36cd93;
		font-size: 20rpx;
		margin-right: 8rpx;
	}

	.itemtitalbtmnum {
		font-size: 56rpx;
		color: #f1862a;
	}

	.itemtitalbtmbtn {
		font-size: 24rpx;
		color: #FFFFFF;
		width: 148rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		background-color: #2acb8c;
		float: right;
		margin-top: 20rpx;
		border-radius: 5rpx;
	}

	.itemtitalbtm {
		overflow: hidden;
	}


	.family {
		width: 670rpx;
		min-height: 10rpx;
		margin: 0 auto;
	}

	.familytitle {
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.familytitletext1 {
		color: #2a2d32;
		font-size: 36rpx;
		font-weight: 600;
	}

	.familytitletext2 {
		font-size: 24rpx;
		color: #cbcbcb;
		margin-top: 12rpx;
	}

	.familylist {
		width: 100%;
		padding: 36rpx;
	}

	.familytype {
		display: flex;
		justify-content: space-between;
	}

	.ftype-item {
		width: 134rpx;
		height: 50rpx;
		background-color: #e6e6e6;
		color: #676767;
		font-size: 24rpx;
		line-height: 50rpx;
		text-align: center;
		border-radius: 50rpx;
	}

	.familytypelistitem {
		margin: 20rpx 0;
		display: flex;
	}

	.familytypelistitem-img {
		width: 180rpx;
		height: 180rpx;
	}

	.familytypelistitem-msg {
		margin-left: 10rpx;
	}

	.msg-title {
		font-size: 32rpx;
		color: #2e3033;
		margin-bottom: 4rpx;
	}

	.msg-msg {
		font-size: 24rpx;
		color: #cbcbcb;
	}

	.msg-type {
		display: flex;
	}

	.msg-type-item {
		font-size: 24rpx;
		color: #2acb8c;
		background-color: #e7fbf2;
		width: 110rpx;
		height: 38rpx;
		line-height: 34rpx;
		text-align: center;
	}

	.msg-type-item1 {
		margin-left: 16rpx;
		font-size: 24rpx;
		color: #2acb8c;
		background-color: #f0fcf7;
		width: 110rpx;
		height: 38rpx;
		line-height: 34rpx;
		text-align: center;
	}

	.msg-price {
		font-size: 48rpx;
		color: #F1862A;
	}
</style>
